window.onload = function () {
    let data = [{
        "id": 1,
        "name": "aa",
        "sex": "男",
        "age": 19,
        "tel": 18292743385,
        "scores": 98.3,
        "school": "宝鸡文理"
    },
        {
            "id": 2,
            "name": "bb",
            "sex": "男",
            "age": 19,
            "tel": 15292743385,
            "scores": 88.3,
            "school": "商洛学院"
        },
        {
            "id": 3,
            "name": "cc",
            "sex": "女",
            "age": 20,
            "tel": 15292743385,
            "scores": 90,
            "school": "宝鸡文理"
        },
        {
            "id": 4,
            "name": "dd",
            "sex": "男",
            "age": 17,
            "tel": 16292743385,
            "scores": 80,
            "school": "商洛文理"
        },
        {
            "id": 5,
            "name": "ee",
            "sex": "女",
            "age": 19,
            "tel": 15392743385,
            "scores": 78.3,
            "school": "西安文理"
        }, {
            "id": 6,
            "name": "ff",
            "sex": "男",
            "age": 29,
            "tel": 13292743385,
            "scores": 68.3,
            "school": "西安文理"
        }, {
            "id": 7,
            "name": "uu",
            "sex": "男",
            "age": 29,
            "tel": 17292743385,
            "scores": 88.8,
            "school": "宝鸡文理1"
        }, {
            "id": 8,
            "name": "cc1",
            "sex": "男",
            "age": 19,
            "tel": 19292743385,
            "scores": 98.3,
            "school": "宝鸡文理"
        }, {
            "id": 9,
            "name": "cc2",
            "sex": "男",
            "age": 19,
            "tel": 28292743385,
            "scores": 78.3,
            "school": "宝鸡文理"
        }, {
            "id": 10,
            "name": "cc3",
            "sex": "男",
            "age": 19,
            "tel": 18292743385,
            "scores": 68.3,
            "school": "宝鸡文理"
        }, {
            "id": 11,
            "name": "cc4",
            "sex": "男",
            "age": 19,
            "tel": 18292743385,
            "scores": 78.3,
            "school": "宝鸡文理"
        }, {
            "id": 12,
            "name": "cc3",
            "sex": "男",
            "age": 19,
            "tel": 18292743385,
            "scores": 68.3,
            "school": "宝鸡文理"
        }, {
            "id": 13,
            "name": "cc4",
            "sex": "男",
            "age": 19,
            "tel": 18292743385,
            "scores": 78.3,
            "school": "宝鸡文理"
        }, {
            "id": 14,
            "name": "cc3",
            "sex": "男",
            "age": 19,
            "tel": 18292743385,
            "scores": 68.3,
            "school": "宝鸡文理"
        }, {
            "id": 15,
            "name": "cc4",
            "sex": "男",
            "age": 19,
            "tel": 18292743385,
            "scores": 78.3,
            "school": "宝鸡文理"
        }]
    var pos;
    let tab = document.getElementById("tab");
    var update1 = document.querySelector(".update");
    var add1 = document.querySelector(".add");
    init();
//1.渲染数据
    function init() {
//1.逐条遍历数据
        for (let index = 0; index < data.length; index++) {

//2.生成一行tr
            let tr = document.createElement("tr")

            if (index % 2 == 0) {
                tr.style.backgroundColor = "lightgreen";
            }

//3.生成行内的td
            for (let j = 0; j < Object.keys(data[0]).length + 2; j++) {
                let td = document.createElement("td")
                tr.appendChild(td);//添加到tr
            }
//4，给每一行的td赋初值
            tr.children[0].innerHTML = data[index].id;
            tr.children[1].innerHTML = data[index].name;
            tr.children[2].innerHTML = data[index].sex;
            tr.children[3].innerHTML = data[index].age;
            tr.children[4].innerHTML = data[index].tel;
            tr.children[5].innerHTML = data[index].scores;
            tr.children[6].innerHTML = data[index].school;

            /**
             想想，上边的代码 3.生成行内的td 能否解耦成下边的简洁代码。
             注：data[index]:对象名   Object.keys(data[index])[i]属性名

             for(let i=0;i<data[0].length;i++)
             {
        tr.children[i].innerHTML=data[index][Object.keys(data[index])[i]];
}
             **/

//5.创建操作按钮
            let button = document.createElement("button")
            let button1 = document.createElement("button")
            button.innerHTML = "删除";
            button1.innerHTML = "更新";
//2.删除数据
            button.onclick = del(index);
            button1.onclick =update(index);
//6.添加按钮对象
            tr.children[Object.keys(data[0]).length].appendChild(button)
            tr.children[Object.keys(data[0]).length+1].appendChild(button1)

            tab.appendChild(tr);
        }
    }

//点击按钮实现，删除操作
    function del(index) {//想想，为啥这么写？好处是啥
        return function () {

            if (window.confirm("你确定要删除吗？")) {
                data.splice(index, 1);
                tab.innerHTML = "";
                init();
            }
        }

    }

//点击按钮，实现数据回显效果
    function update(index){//想想，为啥这么写？好处是啥
        return function () {
            var update = document.querySelector(".update");
            var add = document.querySelector(".add");
// update.style.display = "none";
// add.style.display = "block";
// data[data.length-1].id+1;
            document.querySelector(".xm1").value = data[index].name
            // document.querySelectorAll(".xb1")[0].checked?"男":"女";
            document.querySelector(".nl1").value = data[index].age;
            document.querySelector(".dh1").value = data[index].tel;
            document.querySelector(".cj1").value = data[index].scores
            document.querySelector(".xx1").value = data[index].school
            pos=index;//记录更新的数组下标
        }

    }


//3.数据添加
    let sub = document.getElementById("sub")
    sub.onclick = function () {
        let id = data[data.length - 1].id + 1;
        let xm = document.querySelector(".xm").value
        let xb = document.querySelectorAll(".xb")[0].checked ? "男" : "女";
        let nl = document.querySelector(".nl").value
        let dh = document.querySelector(".dh").value
        let cj = document.querySelector(".cj").value
        let xx = document.querySelector(".xx").value
//数据入库
        let newobj = {
            "id": id,
            "name": xm,
            "sex": xb,
            "age": nl,
            "tel": dh,
            "scores": cj,
            "school": xx
        }
        data.push(newobj);//数据添加仓库之后，重新渲染界面
        tab.innerHTML = "";
        add1.reset();
        init();//调用init方法重新渲染界面


    }

//4实现更新
    let sub1 = document.getElementById("sub1")
    sub1.onclick = function () {
        let id = data[data.length - 1].id + 1;
        let xm = document.querySelector(".xm1").value
        let xb = document.querySelectorAll(".xb1")[0].checked ? "男" : "女";
        let nl = document.querySelector(".nl1").value
        let dh = document.querySelector(".dh1").value
        let cj = document.querySelector(".cj1").value
        let xx = document.querySelector(".xx1").value
//更新这条数据
        data[pos] = {
            "id": id,
            "name": xm,
            "sex": xb,
            "age": nl,
            "tel": dh,
            "scores": cj,
            "school": xx
        }

        update1.reset();
        tab.innerHTML = "";
        init();//调用init方法重新渲染界面
    }
}
